<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <script type="text/javascript">
        function adapt(designWidth, rem2px) {
            var d = window.document.createElement('div');
            d.style.width = '1rem';
            d.style.display = "none";
            var head = window.document.getElementsByTagName('head')[0];
            head.appendChild(d);
            var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'));
            d.remove();
            document.documentElement.style.fontSize = window.innerWidth / designWidth * rem2px / defaultFontSize * 100 + '%';
            var st = document.createElement('style');
            var portrait = "@media screen and (min-width: " + window.innerWidth + "px) {html{font-size:" + ((window.innerWidth / (designWidth / rem2px) / defaultFontSize) * 100) + "%;}}";
            var landscape = "@media screen and (min-width: " + window.innerHeight + "px) {html{font-size:" + ((window.innerHeight / (designWidth / rem2px) / defaultFontSize) * 100) + "%;}}"
            st.innerHTML = portrait + landscape;
            head.appendChild(st);
            return defaultFontSize
        }
        ;
        var defaultFontSize = adapt(1920, 85);
    </script>
    <link rel="stylesheet" href="css/swiper-3.4.1.min.css"/>
    <link rel="stylesheet" href="css/fliptimer.css"/>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div class="swiperBox pos-r  swiper-container">
    <ul class="pos-a swiper-wrapper">
        <li class="swiper-slide slideOne">
            <!--<h3 class="time">-->
            <!--<span>2</span><span>0</span><span>1</span><span>7</span>年<span>0</span><span>0</span>月<span>0</span><span>0</span>日<span>0</span><span>0</span>:<span>0</span><span>0</span>:<span>0</span><span>0</span>-->
            <!--</h3>-->
            <div class="huizhims">
                <img src="./images/bg222.png" alt=""/>

                <div class="One5ef huizhinNub"></div>
                <h5 class="huizhimsText">
                    今日头条
                </h5>
                <h5 class="huizhimsText2">
                    累计阅读量
                </h5>
            </div>
            <div class="weibo">
                <img src="./images/bg222.png" alt=""/>

                <div class="One5ef weiboNub"></div>
                <h5 class="huizhimsText">合作媒体</h5>
            </div>
            <div class="qiye">
                <img src="./images/bg222.png" alt=""/>

                <div class="One5ef qiyeNub"></div>
                <h5 class="huizhimsText">企业客户数</h5>
            </div>
            <div class="kekaoxing">
                <img src="./images/bg222.png" alt=""/>

                <div class="One5ef kekaoxingNub"></div>
                <h5 class="huizhimsText">
                    可靠性
                </h5>
                <h5 class="huizhimsText2">
                    仿真注册数
                </h5>
            </div>
            <div class="weixin">
                <img src="./images/bg222.png" alt=""/>

                <div class="One5ef weixinNub"></div>
                <h5 class="weixinText">微信粉丝数</h5>
            </div>

            <div class="echarts" id="main">
            </div>
        </li>
        <li class="swiper-slide"  data-swiper-autoplay="23000">
            <div class="slideThreeTit">
                200家权威检测机构，9大类300余种产品，性能、安全、环保等9大类40000余种参数，全面满足各类检测需求。
            </div>
            <div class="slideThree">

                <div class="shiyanshi">
                    <p>40+地区</p>
                    <img src="./images/bg9.png" alt=""/>
                    <em>实验室覆盖</em>
                </div>
                <span>合肥<i class="diandian">合肥</i></span>
                <span>广州<i class="diandian">广州</i></span>
                <span>太原<i class="diandian">太原</i></span>
                <span>长春<i class="diandian">长春</i></span>
                <span>大连<i class="diandian">大连</i></span>
                <span>呼和浩特<i class="diandian">呼和浩特</i></span>

                <span>昆明<i class="diandian">昆明</i></span>
                <span>西安<i class="diandian">西安</i></span>
                <span>重庆<i class="diandian">重庆</i></span>
                <span>长沙<i class="diandian">长沙</i></span>
                <span>沈阳<i class="diandian">沈阳</i></span>
                <span>上海<i class="diandian">上海</i></span>

                <span>天津<i class="diandian">天津</i></span>
                <span>绵阳<i class="diandian">绵阳</i></span>
                <span>温州<i class="diandian">温州</i></span>
                <span>北京<i class="diandian">北京</i></span>
                <span>河源<i class="diandian">河源</i></span>

                <span>承德<i class="diandian">承德</i></span>
                <span>南昌<i class="diandian">南昌</i></span>
                <span>厦门<i class="diandian">厦门</i></span>
                <span>兰州<i class="diandian">兰州</i></span>
                <span>杭州<i class="diandian">杭州</i></span>

                <span>郑州<i class="diandian">郑州</i></span>
                <span>无锡<i class="diandian">无锡</i></span>
                <span>武汉<i class="diandian">武汉</i></span>
                <span>苏州<i class="diandian">苏州</i></span>
                <span>洛阳<i class="diandian">洛阳</i></span>

                <span>贵阳<i class="diandian">贵阳</i></span>
                <span>青岛<i class="diandian">青岛</i></span>
                <span>济南<i class="diandian">济南</i></span>
                <span>海口<i class="diandian">海口</i></span>
                <span>深圳<i class="diandian">深圳</i></span>
                <span>宁波<i class="diandian">宁波</i></span>
                <span>南京<i class="diandian">南京</i></span>
            </div>
        </li>
        <li class="swiper-slide slideTwo ">
            <div class="slideTwoL bg13" id="dd5">
                <h2>11月份工作计划</h2>

                <div class="TextScrollbox">
                    <ul>
                        <li>
                            <i>运营 : </i>
                            <span>微信活跃粉丝：7.5万+；头条号预计阅读量195万+</span>
                        </li>
                        <li>
                            <i>产品 : </i>
                            <span>跟进“质量在线”新增优化功能上线后的追踪优化工作，完成账号互通相关页面设计工作；完成“质惠民生”项目数据统计相关产品设计工作。</span>
                        </li>
                        <li>
                            <i>公关 : </i>
                            <span> 完成“质量在线”专家KPI（80%）；完成媒体库储备1985家</span>
                        </li>
                        <li>
                            <i>商务 : </i>
                            <span>厂商储备数量 预计完成数量：80；协会跟进预计完成数量：8；客户检测报告反馈  预计完成数量：2</span>
                        </li>
                        <li>
                            <i>技术 : </i>
                            <span>质量在线版本优化、与RASO系统会员对接；质惠民生用户行为统计功能开发进行50%；</span>
                        </li>
                        <!--<li>
                            <i>检测 : </i>
                            <span>新增24种产品</span>
                        </li>-->
                        <li>
                            <i>设计 : </i>
                            <span>京东抽奖转盘活动页面设计及修改</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="slideTwoR" id="slideTwoR"></div>
        </li>
    </ul>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/swiper-3.4.1.jquery.min.js"></script>
<script type="text/javascript" src="js/echarts.common.min.js"></script>
<script type="text/javascript" src="js/jquery.fliptimer.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
    $(function () {
        var trg, intTim, timOut, onetim;
        new Swiper('.swiperBox', {
            autoplay: 21000,//可选选项，自动滑动
            speed: 1200,
            loop: true,
            autoplayDisableOnInteraction: false,
            onInit: function (swiper) {
//                onetim=setInterval(function(){
////                    $.myData()
//                },1000)

                //首页创建图表
                var myChart = echarts.init($('.echarts')[0]);
                var myChart_1 = echarts.init($('.echarts')[1]);
                // var echitem = ['2016/5','2016/6', '2016/7', '2016/8','2016/9','2016/10', '2016/11', '2016/12', '2017/1', '2017/2', '2017/3', '2017/4','2017/5','2017/6','2017/7','2017/8','2017/9','2017/10'];
                var echitem = ['2016/6', '2016/7', '2016/8','2016/9','2016/10', '2016/11', '2016/12', '2017/1', '2017/2', '2017/3', '2017/4','2017/5','2017/6','2017/7','2017/8','2017/9','2017/10','2017/11'];

                // var dataArr = [10000, 33000, 60000, 65600, 100000, 110000, 145000, 150000, 201541, 240000, 280000, 300000,312000,330000,342095,342760,343299,343975];
                var dataArr = [ 33000, 60000, 65600, 100000, 110000, 145000, 150000, 201541, 240000, 280000, 300000,312000,330000,342095,342760,343299,343975,344331];
                var option = {
                    xAxis: {
                        type: 'category',
                        boundaryGap: true,

                        data: echitem,
                        nameTextStyle: {
                            color: 'rgb(225,225,225)'
                        },
                        name: '时间',
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: 'rgb(225,225,225)'
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        name: '微信粉丝数',
                        nameTextStyle: {
                            color: 'rgb(225,225,225)',
                            fontFamily: 'sans-serif',
                            fontSize: 12,
                        },
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        axisLabel: {
                            show: true,
                            margin: 10,
                            interval: 'auto',
                            formatter: '{value}',
                            textStyle: {
                                color: 'rgb(225,225,225)'
                            }
                        },
                    },
                    series: [
                        {
                            type: 'line',
                            smooth: false,
                            symbol: 'none',
                            sampling: 'average',
                            itemStyle: {
                                normal: {
                                    color: 'rgba(0, 0, 0,0)',
                                    borderWidth: 0
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#236a6d'
                                    }, {
                                        offset: 1,
                                        color: '#10142a'
                                    }])
                                }
                            },
                            data: dataArr
                        }
                    ]
                };
                myChart.setOption(option);
                myChart_1.setOption(option);



                var echitemY = [0, 25, 50, 75, 100]
                var myChart1 = echarts.init($('.slideTwoR')[0]);
                var myChart1_1 = echarts.init($('.slideTwoR')[1]);
                var echitem1 = ['运营', '产品', '公关', '商务', '技术',  '设计'];
                var dataArr1 = [78,82,90,80,75,85];
                var option1 = {
                    title: {
                        text: '任务完成度',
                        x: 'center',
                        y: 0,
                        textAlign: 'left',
                        textStyle: {
                            color: '#65fff7',
                            fontSize: 26
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: true,
                        data: echitem1,
                        nameTextStyle: {
                            color: '#65fff7',
                            fontSize: 18
                        },
                        name: '部门',
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#1f4355'
                            }
                        },
                        axisLine: {
                            show: true,
                            onZero: true,
                            lineStyle: {
                                color: '#1f4355',
                                width: 1,
                                type: 'solid',
                            },
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            margin: 20,
                            textStyle: {
                                fontSize: 20,
                                color: '#65fff7'
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        max:100,
                        min:0,
                        splitNumber:4,
                        interval:25,
                        data: echitemY,
                        boundaryGap: false,
                        axisLabel: {
                            show: true,
                            margin: 10,
                            interval: 'auto',
                            formatter: '{value}%',
                            textStyle: {
                                fontSize: 16,
                                color: '#65fff7'
                            }
                        },
                        axisLine: {
                            show: true,
                            onZero: true,
                            lineStyle: {
                                color: '#1f4355',
                                width: 1,
                                type: 'solid',
                            },
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#1f4355'
                            }
                        },
                        axisTick: {
                            show: false
                        },

                    },
                    series: [
                        {
                            type: 'bar',
                            barWidth: 30,
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        position: [0, -20],
                                        formatter: '{c} %',
                                        textStyle: {
                                            color: '#fff',
                                            fontStyle: 'normal',
                                            fontWeight: 400,
                                            fontFamily: 'sans-serif',
                                            fontSize: 14,
                                        },
                                    },
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#48d5c8'
                                    }, {
                                        offset: 1,
                                        color: '#112341'
                                    }])
                                }
                            },
                            data: dataArr1
                        }
                    ]
                };
                myChart1.setOption(option1);
                myChart1_1.setOption(option1);

                //数字滚滚
                function AnmNub(obj) {
                    this.Target = obj.Target;
                    this.Numbers = obj.Numbers;
                    this.Duration = obj.Duration;
                    this.Animate = function (Numbers) {
                        Numbers = Numbers || this.Numbers;
                        var boxHei = $(this.Target).height();
                        var array = Numbers.toString().split("");
                        //遍历数组
                        for (var i = 0; i < array.length; i++) {
                            var currentN = array[i];
                            //数字append进容器
                            var t = $("<ul class=\"box1\" ></ul>");
                            $(t).append("<li class=\"childNumber\">" + array[i] + "</div>");
                            $(this.Target).append(t);
                            //生成滚动数字,根据当前数字大小来定
                            for (var j = 0; j <= currentN; j++) {
                                var tt;
                                if (j == currentN) {
                                    tt = $("<li class=\"main\">" + j + "</div>");
                                } else {
                                    tt = $("<li class=\"childNumber\">" + j + "</div>");
                                }
                                $(t).append(tt);
                            }
                            $(t).animate({marginTop: -((parseInt(currentN) + 1) * boxHei) + "px"}, this.Duration, function () {
                                $(this).find(".childNumber").remove();
                                $(this).css({marginTop: 0 + "px"});
                            });
                        }
                    };
                    this.Animate();
                    this.ChangeNumber = function (numbers, Duration) {
                        this.Duration = Duration;
                        var boxHei = $(this.Target).height();
                        var oldArray = $(this.Target).find('.main').text()
                        var newArray = numbers.toString().split("");
                        if (oldArray.length != newArray.length) {
                            $(this.Target).find('.box1').remove()
                            this.Animate(numbers);
                            return;
                        }
                        for (var i = 0; i < oldArray.length; i++) {
                            var o = oldArray[i];
                            var n = newArray[i];
                            if (o != n) {
                                var c = $(this.Target).find(".box1")[i];
                                for (var j = 0; j <= n; j++) {
                                    var nn;
                                    if (j == n) {
                                        nn = $("<li class=\"main\">" + j + "</li>");
                                    } else {
                                        nn = $("<li class=\"childNumber\">" + j + "</li>");
                                    }
                                    $(c).append(nn);
                                }
                                $(c).animate({marginTop: -((parseInt(n) + 1) * boxHei) + "px"}, this.Duration, function () {

                                    $(this).find(".childNumber").remove();
                                    $($(this).find(".main")[0]).remove();
                                    $(this).css({marginTop: 0 + "px"});
                                });
                            }
                        }
                        this.Numbers = numbers;
                    }
                }

//                今日头条
                var aa = 1880000;

                var huizhinNub = new AnmNub({Target: $('.huizhinNub')[0], Numbers: aa, Duration: 500})
                var huizhinNub1 = new AnmNub({Target: $('.huizhinNub')[1], Numbers: aa, Duration: 500})
//                setInterval(function () {
//                    aa++;
                huizhinNub.ChangeNumber(aa, 500)
                huizhinNub1.ChangeNumber(aa, 500)
//                }, 222000);

//                合作媒体
                var bb = 2107;
                var weiboNub = new AnmNub({Target: $('.weiboNub')[0], Numbers: bb, Duration: 500})
                var weiboNub1 = new AnmNub({Target: $('.weiboNub')[1], Numbers: bb, Duration: 500})
//                setInterval(function () {
//                    bb++;
                weiboNub.ChangeNumber(bb, 500)
                weiboNub1.ChangeNumber(bb, 500)
//                }, 300000)


//                可靠性用户数
                var cc = 91;
                var kekaoxingNub = new AnmNub({Target: $('.kekaoxingNub')[0], Numbers: cc, Duration: 500})
                var kekaoxingNub1 = new AnmNub({Target: $('.kekaoxingNub')[1], Numbers: cc, Duration: 500})
//                setInterval(function () {
//                    cc++;
                kekaoxingNub.ChangeNumber(cc, 500)
                kekaoxingNub1.ChangeNumber(cc, 500)
//                }, 6000000)

//                微信粉丝数
                var dd = 344331;
                var weixinNub = new AnmNub({Target: $('.weixinNub')[0], Numbers: dd, Duration: 500})
                var weixinNub1 = new AnmNub({Target: $('.weixinNub')[1], Numbers: dd, Duration: 500})
//                setInterval(function () {
//                    dd += 2;
                weixinNub.ChangeNumber(dd, 700)
                weixinNub1.ChangeNumber(dd, 700)
//                }, 30000);

                // 企业客户数
                var ee = 145;
                var qiyeNub = new AnmNub({Target: $('.qiyeNub')[0], Numbers: ee, Duration: 500})
                var qiyeNub1 = new AnmNub({Target: $('.qiyeNub')[1], Numbers: ee, Duration: 500})
//                setInterval(function () {
//                    ee++;
                qiyeNub.ChangeNumber(ee, 500)
                qiyeNub1.ChangeNumber(ee, 500)
//                }, 700000)

            },
            onSlideChangeEnd: function (swiper) {
                if (swiper.realIndex == 1) {
                    $('.slideThree span').each(function (ind) {
                        optamt($(this), 1, 0.2, ind / 5)
                    })
                    trg = false;
                    intTim = setInterval(function () {
                        if (trg) {
                            $('.slideThree span').each(function (ind) {
                                optamt($(this), 1, 0.2, ind / 5);
                            })
                            trg = false;
                        } else {
                            timOut = setTimeout(function () {
                                $('.slideThree span').each(function (ind) {
                                    optamt($(this), 0, 0, 0)
                                })
                                trg = true;
                            }, 5000)
                        }
                    }, 8000)

                } else {
                    $('.slideThree span').each(function (ind) {
                        optamt($(this), 0, 0, 0)
                    })
                    clearTimeout(timOut);
                    clearInterval(intTim);
                    trg = false;
                }
            }
        });


//        textScroll('.TextScrollbox');

        function optamt(ele, num, s, yanchi) {
            num = num || 0;
            s = s || 1;
            yanchi = yanchi || 0;
            ele.css({
                'transition': 'all ' + s + 's linear ' + yanchi + 's',
                '-webkit-transition': 'all ' + s + 's linear ' + yanchi + 's',
                '-moz-transition': 'all ' + s + 's linear ' + yanchi + 's',
                '-ms-transition': 'all ' + s + 's linear ' + yanchi + 's',
                '-o-transition': 'all ' + s + 's linear ' + yanchi + 's',
                'opacity': num,
            });
        }

        var styObj = [
            {'top': '5.4rem', 'right': '4.6rem'},
            {'top': '8rem', 'right': '4.35rem'},
            {'top': '3.5rem', 'right': '5.9rem'},
            {'top': '2rem', 'right': '2.1rem'},
            {'top': '2.85rem', 'right': '1.85rem'},
            {'top': '2.8rem', 'right': '5.2rem'},

            {'top': '8rem', 'right': '8rem'},
            {'top': '4.9rem', 'right': '6.5rem'},
            {'top': '6.65rem', 'right': '6.1rem'},
            {'top': '6.6rem', 'right': '5.3rem'},
            {'top': '3.2rem', 'right': '2.6rem'},
            {'top': '6.5rem', 'right': '3.1rem'},


            {'top': '4.4rem', 'right': '3.7rem'},
            {'top': '5.85rem', 'right': '8rem'},
            {'top': '7.2rem', 'right': '4.2rem'},
            {'top': '3.8rem', 'right': '4rem'},
            {'top': '8.15rem', 'right': '5.25rem'},

            {'top': '4rem', 'right': '5rem'},
            {'top': '7.15rem', 'right': '5.2rem'},
            {'top': '7.6rem', 'right': '3.7rem'},
            {'top': '4.6rem', 'right': '7.6rem'},
            {'top': '7.2rem', 'right': '3.3rem'},

            {'top': '4.9rem', 'right': '5.6rem'},
            {'top': '5.8rem', 'right': '3.7rem'},
            {'top': '5.95rem', 'right': '4.75rem'},
            {'top': '5.3rem', 'right': '3.2rem'},
            {'top': '5.35rem', 'right': '5.7rem'},

            {'top': '7.4rem', 'right': '6.66rem'},
            {'top': '4.6rem', 'right': '3.15rem'},
            {'top': '5rem', 'right': '3.8rem'},
            {'top': '9.4rem', 'right': '5.75rem'},
            {'top': '8.5rem', 'right': '4.5rem'},
            {'top': '6.7rem', 'right': '3.8rem'},
            {'top': '5.9rem', 'right': '3rem'},


        ]
        $('.slideThree span').each(function (ind) {
            $(this).css(styObj[ind])
        })

        var toutiaonub = $('.huizhinNub').eq(0);
        var toutiaonub1 = $('.huizhinNub').eq(1);
        var str = '<i class="douhao" style="left: 43%">,</i>';
        $(toutiaonub).append(str)
        $(toutiaonub1).append(str)
        $(toutiaonub).children('ul').eq(3).css('marginLeft', '12px')
        $(toutiaonub1).children('ul').eq(3).css('marginLeft', '12px')


        var weixinNub = $('.weixinNub').eq(0);
        var weixinNub1 = $('.weixinNub').eq(1);
        var str = '<i class="douhao">,</i>';
        $(weixinNub).append(str)
        $(weixinNub1).append(str)
        $(weixinNub).children('ul').eq(3).css('marginLeft', '25px')
        $(weixinNub1).children('ul').eq(3).css('marginLeft', '25px')

    })
</script>
</body>
</html>
